// JavaScript Document
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var balloons = [];

function windowToCanvas(canvas, x, y) {
   var bbox = canvas.getBoundingClientRect();
   //alert(bbox.width);
   return { x: x - bbox.left * (canvas.width  / bbox.width),
            y: y - bbox.top  * (canvas.height / bbox.height)
          };
}

function createBolloons(){
	
	context.clearRect(0,0,canvas.width, canvas.height);	
	//alert('calling');		
	for(i=0; i < balloons.length; i++){
		balloons[i].PumpAirToBalloon();
		//alert(balloons[i].r);
		context.beginPath();
		context.arc(balloons[i].x,balloons[i].y,balloons[i].r,0,2 * Math.PI,false);
		context.fillStyle = balloons[i].color;
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = "black";
        context.stroke();
	}
}

canvas.onmouseup = function(e){	
	var loc = windowToCanvas(canvas, e.clientX, e.clientY);	
	var balloon = new Balloon(loc.x, loc.y);
	balloons.push(balloon);	
}


function Initialize(){
	var balloon = new Balloon(100, 100);
	balloons.push(balloon);	
	
	setInterval(createBolloons, 1000/30);
}

Initialize();